<template>
	<view class="head_content">
		<view class="head_content_top">
			<view class="left">
				<text class="iconfont icon-touxiang"></text>
			</view>
			<view class="center">
				<text>郭先生的宝宝</text>
				<u-icon name="arrow-right" size="15"></u-icon>
			</view>
			<view class="right">
				<u-icon name="scan" size="30"></u-icon>
			</view>
		</view>
		<!-- 滚动区域 -->
		<view>
			<scroll-view class="scrollView" :scroll-y="true">
				<!-- logo区域 -->
				<view class="logo">
					<view class="title">
						<view class="tl">
							<text>开通黑胶VIP</text>
							<text>立享超21项专属特权 ></text>
						</view>
						<view class="tr">
							<text>会员中心</text>
						</view>
					</view>
					<view class="desc">
						<text>￥0.2/天购黑胶,赢Switch套装</text>
						<!-- <text class="iconfont icon-qiang"></text> -->
						<text class="iconfont icon-qiangzi"></text>
					</view>
				</view>
				<!-- 我的消息 -->
				<view class="message">
					<u-cell-group title="">
						<u-cell icon="email" title="我的消息" :isLink="true" arrow-direction="right"></u-cell>
						<u-cell icon="coupon" title="云贝中心" :isLink="true" arrow-direction="right">
							<view slot="value" class="u-slot-value">
								<u-tag text="签到" plain size="mini" type="warning"></u-tag>
							</view>
						</u-cell>
						<u-cell :border="false" icon="heart" title="创作者中心" :isLink="true" arrow-direction="right">
							<view slot="value" class="u-slot-value">
								<u-badge max="99" :value="9"></u-badge>
							</view>
						</u-cell>
					</u-cell-group>
				</view>
				<!-- 音乐服务 -->
				<view class="music">
					<u-cell-group title="音乐服务">
						<u-cell title="云村有票" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-youhuobaopiaoju"></text>
							</view>
						</u-cell>
						<u-cell title="商城" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-gouwuche"></text>
							</view>
							<view slot="value" class="u-slot-value">
								<u-tag text="签到" plain size="mini" type="warning"></u-tag>
							</view>
						</u-cell>
						<u-cell title="Beat交易平台" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon--jiaoyipingtai"></text>
							</view>
						</u-cell>
						<u-cell title="游戏专区" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-youxi"></text>
							</view>
						</u-cell>
						<u-cell title="口袋彩铃" :border="false" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
					</u-cell-group>
				</view>
				<!-- 其他 -->
				<view class="music">
					<u-cell-group title="其他">
						<u-cell title="设置" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-youhuobaopiaoju"></text>
							</view>
						</u-cell>
						<u-cell title="夜间模式" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-gouwuche"></text>
							</view>
							<view slot="value" class="u-slot-value">
								<u-tag text="签到" plain size="mini" type="warning"></u-tag>
							</view>
						</u-cell>
						<u-cell title="定时关闭" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon--jiaoyipingtai"></text>
							</view>
						</u-cell>
						<u-cell title="个性装扮" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-youxi"></text>
							</view>
						</u-cell>
						<u-cell title="边听边存" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
						<u-cell title="在线听歌免流量" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
						<u-cell title="音乐黑名单" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
						<u-cell title="青少年模式" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
						<u-cell title="音乐闹钟" :border="false" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
					</u-cell-group>
				</view>
				<!-- 我的订单 -->
				<view class="music">
					<u-cell-group title="">
						<u-cell title="我的订单" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-youhuobaopiaoju"></text>
							</view>
						</u-cell>
						<u-cell title="优惠卷" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-gouwuche"></text>
							</view>
						</u-cell>
						<u-cell title="我的客服" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon--jiaoyipingtai"></text>
							</view>
						</u-cell>
						<u-cell title="分享网易云音乐" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-youxi"></text>
							</view>
						</u-cell>
						<u-cell title="个人信息收集与使用清单" :border="false" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
						<u-cell title="个人信息第三方共享清单" :border="false" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
						<u-cell title="个人信息与隐私保护" :border="false" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
						<u-cell title="关于" :border="false" :isLink="true" arrow-direction="right">
							<view slot="icon" class="u-slot-icon">
								<text class="iconfont icon-cailing"></text>
							</view>
						</u-cell>
					</u-cell-group>
				</view>
				<view class="music">
					<u-button type="error" :plain="true" text="退出登录/关闭"></u-button>
				</view>
			</scroll-view>

		</view>
	</view>

</template>

<script>
</script>

<style lang="scss" scoped>
	@import url("https://at.alicdn.com/t/font_3226380_5lydog3t08g.css");

	// 点击左边按钮弹出框的样式
	.head_content {
		width: 630rpx;

		// margin-bottom: 80rpx;
		.head_content_top {
			width: 600rpx;
			display: flex;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 30rpx;
			margin-left: 30rpx;

			.left {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;

				.iconfont {
					font-size: 60rpx;
					color: #db639b;
				}
			}

			.center {
				margin-left: 20rpx;
				flex: 1;
				display: flex;
			}

			.right {
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}

		// 滚动区域
		.scrollView {
			width: 590rpx;
			height: calc(100vh - 160rpx);
			margin: 20rpx 20rpx;

			background-color: #eee;

			.logo {
				width: 590rpx;
				height: 200rpx;
				background-color: #000;
				color: #fff;
				border-radius: 30rpx;


				.title {
					height: 120rpx;
					align-items: center;
					display: flex;
					padding: 0 20rpx;
					justify-content: space-between;

					.tl {
						height: 80rpx;
						display: flex;
						flex-direction: column;

						:nth-child(2) {
							font-size: 20rpx;
						}
					}

					.tr {
						height: 80rpx;
						text-align: right;
						width: 30%;

						text {
							border: 2rpx solid #eee;
							border-radius: 10rpx;
							font-size: 22rpx;
							padding: 5rpx 15rpx;
						}
					}
				}

				.desc {
					height: 80rpx;
					align-items: center;
					display: flex;
					margin: 0 20rpx;
					justify-content: space-between;
					border-top: 2rpx solid #eee;

					:nth-child(1) {
						font-size: 22rpx;
					}

					.iconfont {
						font-size: 40rpx;
						color: yellow;
					}
				}
			}

			.message {
				border: 1rpx solid #eee;
				box-sizing: border-box;
				border-radius: 20rpx;
				width: 590rpx;
				margin: 40rpx 0;
				background-color: #fff;
			}

			.music {
				background-color: #fff;
				border: 1rpx solid #eee;
				box-sizing: border-box;
				border-radius: 20rpx;
				width: 590rpx;
				margin: 40rpx 0;

				.iconfont {
					font-size: 40rpx;
				}
			}
		}
	}
</style>
